import { Draw } from "../../../Draw/Draw";

type HE = HTMLElement;

export function wheel(e: WheelEvent, draw: Draw) {
  const { ctrlKey } = e;
  // eslint-disable-next-line
  // @ts-ignore 鼠标滚轮，上下切换幻灯片
  const up = e.wheelDelta > 0;

  if (ctrlKey) {
    e.stopPropagation();
    e.preventDefault();

    // ctrl 进行缩放
    const root = draw.getRootBox();
    const konvaBox = <HE>root.querySelector(".konva-root-container-konvabox");

    // 定义缩放步长
    const step = 0.2;

    // 先获取目前的缩放比例
    const scaleRegex = /scale\((\d+(\.\d+)?)\)/;
    const baseScale =
      konvaBox.style.transform.match(scaleRegex)?.[1].split(")")?.[0] || 1;

    //  放大
    if (up) {
      const scale = Number(baseScale) >= 3 ? 3 : Number(baseScale) + step;
      konvaBox.style.transform = `scale(${scale >= 3 ? 3 : scale})`;
    } else {
      // 缩小
      const scale = Number(baseScale) <= 0.3 ? 0.3 : Number(baseScale) - step;
      konvaBox.style.transform = `scale(${scale <= 0.3 ? 0.3 : scale})`;
    }

    // 通知 footer 修改缩放比例
    return draw.getEventBus().emit("zoom", Number(baseScale));
  }

  // 需要判断是否达到切换条件
  // if ((<HE>e.target).nodeName === "CANVAS") {
  //   const layerManager = draw.getLayerManager();
  //   if (up) layerManager.prevSlide();
  //   else layerManager.nextSlide();
  // }
}
